<template>
  <div>
    <div @click="applynewadd()">
      <slot><el-button type="primary">添加用户</el-button></slot>
    </div>
    <MyDialog
      :title="'添加用户'"
      :visible.sync="addSwitch"
      :size="showType"
      @beforeClose="close_add"
    >
      <el-form
        ref="khadd"
        :model="queryParam"
        :rules="ywkrules"
        label-width="110px"
        class="demo-ruleForm"
      >
        <div style="padding: 23px 0px 0 0px">
          <el-row>
            <el-col :span="12" :xs="20">
              <el-form-item label="用户名:" prop="username">
                <el-input
                  v-model="queryParam.username"
                  :disabled="edit"
                  maxlength="10"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :xs="20">
              <el-form-item label="密码:" prop="password">
                <el-input
                  v-model="queryParam.password"
                  style="width: 100%"
                  show-word-limit
                  clearable
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" :xs="20">
              <el-form-item
                class="box1 minselect"
                label="是否是管理员:"
                prop="is_admin"
              >
                <el-radio-group v-model="queryParam.is_admin">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template slot="footer">
        <el-button type="primary" @click="submit_apply">保 存</el-button>
        <el-button @click="close_add">取 消</el-button>
      </template>
    </MyDialog>
  </div>
</template>
<script>
import MyDialog from '@/components/Dialog'
import { addAadmin, editAdmin } from '@/api/admin.js'
export default {
  components: {
    MyDialog,
  },
  data() {
    return {
      queryParam: {
        username: '',
        password: '',
        is_admin: 0,
      },
      role_list: [
        { id: 1, name: '增加' },
        { id: -1, name: '减少' },
      ],
      addSwitch: false,
      loading: false,
      uploadList: false,
      ywkrules: {
        is_admin: [
          { required: true, message: '请选择是否为管理员', trigger: 'change' },
        ],
        username: [{ required: true, message: '请填写名称', trigger: 'blur' }],
        password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
      },
      edit: false,
      showType: 'large',
    }
  },
  computed: {},
  watch: {},
  created() {
    if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) {
      // 当前设备是移动设备
      this.showType = 'mini'
    }
  },
  methods: {
    applynewadd(item) {
      this.addSwitch = true
      this.uploadList = false
      this.queryParam.password = ''
      this.edit = false
      if (item) {
        this.edit = true
        let { username, is_admin } = item
        let queryParam = {
          username: username,
          is_admin: is_admin ? 1 : 0,
        }
        this.$nextTick(() => {
          Object.assign(this.queryParam, queryParam)
        })
      }
    },

    submit_apply() {
      if (this.queryParam.password.length < 6) {
        this.$baseMessage('密码不能小于6位', 'warning')
        return
      }
      this.$refs['khadd'].validate(async (valid) => {
        if (valid) {
          this.$confirm('是否继续此操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
            .then(async () => {
              this.loading = true
              let params = {
                password: this.queryParam.password,
              }
              params.is_admin = this.queryParam.is_admin == 1 ? true : false
              let data
              if (this.edit) {
                data = await editAdmin(params, this.queryParam.username)
              } else {
                data = await addAadmin({
                  ...params,
                  username: this.queryParam.username,
                })
              }
              if (data.code == 200) {
                this.$baseMessage('操作成功', 'success')
                this.uploadList = true
                setTimeout(() => {
                  this.close_add()
                }, 500)
              }
              this.loading = false
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },
    close_add() {
      this.$refs['khadd'].resetFields()
      this.$nextTick(() => {
        this.$emit('close', this.uploadList)
        this.addSwitch = false
      })
    },
  },
}
</script>
<style scoped lang="scss">
.upload-box {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #c0ccda;
  cursor: pointer;
}
.live-style-item {
  float: right;
  color: #8492a6;
  font-size: 13px;
  max-width: 200px;
}

.bind-box {
  padding: 0 0 20px;
}

.bind-box-table {
  padding: 0 0 20px;
}

.footer {
  text-align: center;
  padding: 10px 0 45px;

  & > :nth-child(n + 2) {
    margin-left: 14px;
  }

  button {
    width: 106px;
    height: 48px;
  }
}
</style>
